<script setup lang="ts">
// typescript
</script>

<!-- 抽奖卡片 -->
<template>
  <view class="w-components-container w-raffle-card btn-opacity">
    <div class="thumb">
      <image src="../../static/images/delete/1.png"></image>
    </div>
    <div class="info">
      <view class="info-title">抽奖送手机</view>
      <view class="info-date">截止日期：2022-12-31 08:00:00</view>
    </div>
    <div class="button">
      <button plain>立即参加</button>
    </div>
  </view>
</template>

<style scoped lang="scss">
// scss
.w-raffle-card {
  height: calc(200rpx - 40rpx);
  background: linear-gradient(90.7045deg, #ffa68a 0%, #fb5800 46%, #fd6161 100%);
  box-shadow: #ff6a00 0px 0px 5px;
  border-radius: 2px;
  padding: 20rpx;
  display: flex;
}

.thumb {
  margin-right: 30rpx;

  image {
    width: 120rpx;
    height: 172rpx;
  }
}

.info {
  flex: 1;

  .info-title {
    font-size: 36rpx;
    padding-top: 30rpx;
    color: #fff;
    text-shadow: 1px 1px 5px rgb(0 0 0 / 65%);
    margin-bottom: 20rpx;
  }

  .info-date {
    font-size: 24rpx;
    color: #CCCCCC;
  }
}

.button {
  height: 100%;
  display: flex;
  align-items: center;

  button {
    border:1px solid #fff;
    color: #fff;
    line-height: initial;
    border-radius: 20px;
    font-size: 28rpx;
    height: 28px;
    line-height: 28px;
  }
}
</style>